<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <!-- 必须的 meta 标签 -->
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />

    <!-- Bootstrap 的 CSS 文件 -->
    <link rel="stylesheet" href="../css/bootstrap.min.css" />
    <link rel="stylesheet" href="../css/font-awesome.min.css" />
    <link rel="stylesheet" href="../css/scrollBar.css" />

    <title>Xow</title>

    <style>
        html {
            height: 100%;
        }

        body {
            height: 100%;
            color: rgb(139, 142, 145);
        }

        #app {
            padding: 24px 0px 24px 24px;
            font-size: 14px;
        }

        .myCard {
            width: 18rem;
            display: inline-block;
            margin-right: 24px;
            margin-bottom: 16px;
            height: 385px;
            cursor: pointer;
        }

        .cardContainer {
            margin-top: 15px;
            display: inline-block;
        }

        .cardContainer>.myCard:hover {
            box-shadow: rgba(0, 0, 0, 0.1) 5px 5px 5px;
        }

        .detail {
            display: flex;
            flex-direction: column;
        }

        .name {
            height: 40px;
            /* 显示两行,超出隐藏 */
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
        }

        .price {
            height: 30px;
            /* 显示一行,超出隐藏 */
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
        }

        .user {
            /* 显示一行,超出隐藏 */
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            position: relative;
        }

        .floatBar {
            height: 40px;
            position: fixed;
            top: 0px;
            left: 3px;
            border-radius: 10px;
            background-color: rgb(253, 253, 253);
            overflow: hidden;
            transition: height 0.1s;
            z-index: 2;
            width: 100%;
            padding: 0px 15px;
            padding-top: 10px;
        }

        .addDemand {
            position: fixed;
            right: 10px;
            top: 5px;
            z-index: 3;
        }

        .demandClass {
            margin: 0px 0px;
            height: 25px;
            text-align: center;
            padding: 2px 0px
        }

        .demandContainer {
            padding: 0px;
            margin: 0px;
            cursor: pointer;
            vertical-align: middle;
            text-align: center;
        }

        .demandContainer :hover {
            background-color: rgb(200, 22, 35);
            color: #fff;
            border-radius: 5px;
        }
    </style>
</head>

<body>
    <div id="app">
        <div class="cardContainer" v-for="index in demands_info" :key="index">
            <!--'picture?filename='+index.item_image-->
            <!--"https://img0.baidu.com/it/u=2612811943,923465408&fm=26&fmt=auto&gp=0.jpg"-->
            <div class="card myCard"  @click="openDescWin(index.item_desc)" v-if="selectLabel==''||index.item_label==selectLabel" >
                <!--<div v-if="index.item_image == 'sss'">
                    <img src="https://img0.baidu.com/it/u=2612811943,923465408&fm=26&fmt=auto&gp=0.jpg" class="card-img-top" style="height: 75%;width: 100%"
                         alt="商品图片" />
                </div>
                <div v-else>
                    <img :src="'picture?filename='+index.item_image" class="card-img-top" style="height: 75%;width: 100%"
                         alt="商品图片" />
                </div>
                -->
                <!--<img :src="'picture?filename='+index.item_image" class="card-img-top" style="height: 75%;width: 100%"
                     alt="商品图片" />-->
                <img :src="imageURL(index)" class="card-img-top" style="height: 75%;width: 100%"
                     alt="商品图片" />

                <div class="card-body detail">
                    <div class="name">
                        商品名称：{{index.item_name}}
                    </div>
                    <div class="price">
                        <div style="display: inline-block">
                            <i class="fa fa-jpy" style="color: rgb(248, 87, 76); font-size: 22px"></i>
                            <span style="color: rgb(253, 63, 49); font-size: 20px">{{index.item_price}}</span>
                        </div>
                         <!--<div style="display: inline-block; margin-left: 20px">
                            <del>
                                <i class="fa fa-jpy" style="font-size: 14px"></i>
                                <span style="font-size: 14px">232.00</span>
                            </del>
                        </div>-->
                    </div>
                    <!-- <div class="user">
                        <div class="fa fa-snapchat-ghost">这是用户名</div>
                    </div> -->
                    <div style="position:absolute;right:20px;bottom:5px;width:100px;text-align: right;">
                        分类:{{index.item_label}}
                    </div>
                </div>
            </div>
        </div>

        <!-- 添加商品窗口 -->
        <div id="addDemand" style="display:none;padding:15px;">
            <iframe src="addDemand.html" frameborder="0" style="width: 100%;height:600px"></iframe>
        </div>

        <div class="floatBar">
            <div v-if="showState">
                <span style="display: inline-block;padding:0px 8px">分类</span>
                <div v-for="(name,index) in demandClass" :key="index" style="display: inline-block; margin-bottom: 6px">
                    <div class="demandContainer" @click="filterLabel(name)">
                        <div class="demandClass">
                            <span style="display: inline-block;padding:0px 8px">{{name}}</span>
                        </div>
                    </div>
                </div>
                <span style="display: inline-block;cursor: pointer;padding:0px 8px"
                    @click="changeFloatBarHeight">收起</span>
            </div>
            <div v-else @click="changeFloatBarHeight">
                <span style="display: inline-block; cursor: pointer;padding:2px 8px">展开</span>
            </div>
        </div>
        <div class="addDemand">
            <button type="button" class="btn btn-primary btn-sm" @click="openAddDemand">添加需求</button>
        </div>
    </div>

    <!-- 选项 1：jQuery 和 Bootstrap 集成包（集成了 Popper） -->
    <script src="../js/jquery-3.6.0.slim.min.js"></script>
    <script src="../js/bootstrap.bundle.min.js"></script>
    <script src="../js/vue.global.js"></script>
    <!-- <script src="https://unpkg.com/vue"></script> -->
    <script src="../js/axios.min.js"></script>
    <script src="../layer/layer.js"></script>
    <script src="../js/request.js"></script>
    <script src="../js/my-axios.js"></script>

    <script>
        const app = {
            data() {
                return {
                    demands_info:[],
                    demandArr: [1, 2, 3, 4, 5, 6, 7, 8],
                    demandClass: [
                        '全部',
                        '书籍',
                        '衣物',
                        '电子产品',
                        '体育用品',
                        '食品饮料',
                        '美妆护肤',
                        '其他',
                    ],
                    showState: true,
                    selectLabel: ''
                }
            },
            methods: {
                changeFloatBarHeight() {
                    this.showState = !this.showState
                },
                /*goToDetail(demand) {
                    console.log(demand)
                    window.location.href = 'demandDetail.html?demand_id=11'
                },*/
                //打开窗口
                openAddDemand() {
                    this.addIdx = layer.open({
                        type: 1,
                        title: '新增需求信息',
                        area: ['800px', '600px'],
                        content: $('#addDemand')
                    });
                },
                /*openDescWin(desc){
                    layer.alert("此需求描述："+desc,{icon:6});
                },*/
                openDescWin(desc){
                    layer.alert("此需求描述："+desc,{icon:6,area: ['300px','300px']});
                    /*this.addIdx = layer.open({
                        type: 1,
                        title: '此需求描述',
                        area: ['500px', '350px'],
                        content: desc0
                    });*/
                },
                showDemandsInfo(){
                    myAxios.get('/Show_demands_info').then(res=>{
                        this.demands_info=res.data.data;
                    })
                        .catch(function (error) {
                            console.log(error);
                        });
                },
                filterLabel(labelName) {
                    this.selectLabel = labelName == "全部" ? '' : labelName;
                },
                imageURL(index) {
                    //console.log(index.item_image);
                    if (index.item_image == "sss")
                        return "https://img0.baidu.com/it/u=2612811943,923465408&fm=26&fmt=auto&gp=0.jpg"
                    else
                        return "picture?filename="+index.item_image;
                }

            },
            mounted(){
                this.showDemandsInfo();
            }
        }
        Vue.createApp(app).mount('#app')
    </script>
</body>

</html>